//导入vue
import Vue from 'vue'
//导入vuex，管理模块
import Vuex from 'vuex'
//安装vuex
Vue.use(Vuex)

//导入vue-router包
import VueRouter from 'vue-router'
//安装路由
Vue.use(VueRouter)


//导入moment格式化时间,之前需要安装
import moment from 'moment'
//定义全局过滤器
Vue.filter('dateFormat',function(datastr,pattern = "YYYY-MM-DD HH:mm:ss"){
   return moment(datastr).format(pattern)
})

//导入vue-resource
import VueRource from 'vue-resource'
//安装vue-resource
Vue.use(VueRource)
//设置请求的根路径
Vue.http.options.root = 'http://www.liulongbin.top:3005';
//设置提交数据的post的第二个emulate的全局参数
Vue.http.options.emulateJSON = true;


// 导入 MUI 的样式
import './lib/mui/css/mui.min.css'
// 导入扩展图标样式
import './lib/mui/css/icons-extra.css'


//按需导入mint ui的组件
// import {Header,Swipe,SwipeItem,Button,Lazyload} from 'mint-ui'
// //注册组件
// Vue.component(Header.name,Header)
// Vue.component(Swipe.name,Swipe)
// Vue.component(SwipeItem.name, SwipeItem)
// Vue.component(Button.name, Button)
// //预加载
// Vue.use(Lazyload)


import Mint from "mint-ui"
import "mint-ui/lib/style.css"
Vue.use(Mint)

//安装vue图片预览的插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

//导入router.js
import router from './router'

//导入app
import app from './App.vue'




//实例化vuex
//state相当于data,mutations相当于methods
//组件访问this.$store.store.count
//组件调用方法this.$store.commit('方法名')
//this.$store.getters.***

// 先获取本地的储存的购物车数据
var cars = JSON.parse(localStorage.getItem('shopcar') || '[]')

var store = new Vuex.Store({
    state:{
        shopcar:cars
    },
    mutations:{
        addTocar(state,goodsinfo){
            // 假设 在购物车中，没有找到对应的商品
            var flag = false
            state.shopcar.some(item=>{
                if(item.id == goodsinfo.id){
                    item.count += parseInt(goodsinfo.count)
                    flag = true
                    //找到之后return true终止后续循环
                    return true
                }
                
            })
            // 如果最终，循环完毕，得到的 flag 还是 false，则把商品数据直接 push 到 购物车中
            if(!flag){
                state.shopcar.push(goodsinfo)
            }


            //当更新完shopcar之后，把数据存储到本地localStorage中
            localStorage.setItem('shopcar',JSON.stringify(state.shopcar))
        },
        //当点击购物车的数量改变，更新state的数据
        updateShopInfolist(state,shopinfo){
            
            state.shopcar.some(item=>{
                if(item.id == shopinfo.id){
                  item.count = parseInt(shopinfo.count)
                  return true;
                }
                
            })
            localStorage.setItem('shopcar',JSON.stringify(state.shopcar))
           
        },
        //点击删除，删除此商品在购物车的信息
        removeShopInfolist(state,shopid){
            state.shopcar.some((item,i)=>{
                if(item.id==shopid){
                    
                    state.shopcar.splice(i,1)
                    return true
                }
            })
            //删除完后同步回本地
            localStorage.setItem('shopcar',JSON.stringify(state.shopcar))
        },
        //购物车开关selected的值设置
        setShopSelected(state,shopid){
            state.shopcar.some(item=>{
                if(item.id ==shopid){
                    item.selected = !item.selected
                    return true
                }
            })
            
            localStorage.setItem('shopcar',JSON.stringify(state.shopcar))
        },
      

    },
    getters:{
        getAllcount(state){
            var c = 0;
            state.shopcar.forEach(item => {
                c =c + item.count
            })
            return c            
        },
        //通过对象的key和value实现id和count的对应关系
        getShopcount(state){
            var o ={}
            state.shopcar.forEach(item=>{
                o[item.id] = item.count
            })
            return o
        },
        //购物车开关
        getShopSelected(state){
            var o = {}
            state.shopcar.forEach(item=>{
                o[item.id] = item.selected
            })
            return o
        },
          //计算勾选物品总数量
          getcomputedCount(state){
            var c=0;
            state.shopcar.some(item=>{
                if(item.selected){
                    c=c+item.count
                }
            })
            return c
        },
        //计算出总价
        getTotalprice(state){
            var c=0;
            state.shopcar.some(item=>{
                if(item.selected){
                    c+=item.count * item.price
                }
            })
            return c
        }
    }
})







var vm = new Vue({
    el:'#app',
    render: c => c(app),
    router,
    store
  
})